<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table,
        th,
        td {
            border: 0.5px solid #333;
        }

        th,
        td {
            padding: 0 20px;
            line-height: 40px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- <table>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
    </table> -->

    <div id="container">
        <table id="showGrade"></table>
    </div>
</body>
<script>
    // JS 动态生成表格
    // 1. 先写静态的
    // 2. JS动态生成 => 通过JS在页面中绘制出 table结构

    // 原理: document.write可以在页面中输出 文本或html结构 => html结构会被浏览器解析为标签
    // document.write("<h2>hello world</h2>");  

    // 注意:
    // 传统的字符串("",'')不允许在中途换行 

    // 怎么解决?
    // 1. 不允许换行 就不换
    // 2. 改为多字符串拼接
    // 3. ES6 新增 模板字符串(`` 反引号),可以进行正常的换行

    document.write("<table>");
    document.write("<tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr>");
    // document.write("<tr>" +
    //     "<th>姓名</th>" +
    //     "<th>语文</th>" +
    //     "<th>数学</th>" +
    //     "<th>英语</th>" +
    //     "<th>总分</th>" +
    //     "</tr>");
    // document.write(`<tr>
    //         <th>姓名</th>
    //         <th>语文</th>
    //         <th>数学</th>
    //         <th>英语</th>
    //         <th>总分</th>
    //     </tr>`);


    var list = [
        ["张三", 55, 66, 77],
        ["李四", 67, 89, 90],
        ["王五", 96, 50, 87],
    ];

    for (var j = 0; j < list.length; j++) {
        document.write("<tr>");
        var item = list[j];  // ["张三", 55, 66, 77]
        var sum = 0;
        for (var k = 0; k < item.length; k++) {
            document.write(`<td>${item[k]}</td>`);
            if (k == 0) continue;
            sum += item[k];
        }
        document.write(`<td>${sum}</td>`);

        document.write("</tr>");
    }



    document.write("</table>");




</script>

</html>